<template>
  <el-dialog draggable title="分配项目" :close-on-click-modal="false" class="yy-modal--custom yy-modal--custom-sub yy-transfer--custom yy-base-item" width="800px" v-model="isVisible" @close="onCancelModel" :show-close="true">
    <div style="text-align: center;">
      <div class="yy-base-item_room">
        <el-select v-model="room" placeholder="请选择诊室" @change="onRoomChange">
          <el-option
              v-for="item in listRooms"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </div>
      <div class="yy-base-item_search">
        <div class="yy-base-item_search-item">
          <el-select v-model="selectCategory" placeholder="请选择医技分类" style="width: 280px">
            <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div class="yy-base-item_search-item">
          <el-select v-if="false" placeholder="请选择医技分类" style="width: 280px">
            <el-option
                v-for="item in categories"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <el-transfer
          :titles="['可添加终端', '已添加终端']"
          v-model="table.selectList"
          filterable
          :data="leftItems"
      />
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancelModel">关闭</el-button>
          <el-button type="primary" :loading="isSubmit" @click="onSave">保存</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {defineExpose, defineEmits, defineProps, reactive, ref, onBeforeMount, computed} from "vue";
import {QueueRoomModel} from "@/model/QueueRoomModel";
import YjCategoryApi from "@/api/queue/YjCategoryApi";
import YjItemsApi from "@/api/queue/YjItemsApi";
import YjRoomItemsApi from "@/api/queue/YjRoomItemsApi";
import {ElMessage} from "element-plus";
import RoomApi from "@/api/queue/RoomApi";

const $emit = defineEmits({
  saveSuccess: () => true
})

const isVisible = ref(false)
const isSubmit = ref(false)
const listRooms = ref([])
const room = ref()
const categories = ref([])
const selectCategory = ref()

const table = reactive({
  loading: false,
  selectList: [],
  data: []
})

const leftItems = computed(() => {
  if (selectCategory.value) {
    let categoryItems = table.data.filter(item => item.origin.categoryId == selectCategory.value)
    const categoryItemsIds = categoryItems.map(item => item.key);
    const selectItemIds = table.selectList.filter(id => !categoryItemsIds.includes(id))
    debugger
    if (selectItemIds?.length > 0) {
      const selectItems = table.data.filter(item => selectItemIds.includes(item.key))
      categoryItems = categoryItems.concat(selectItems)
    }
    return categoryItems
  }
  return table.data
})

onBeforeMount(() => {
  listYjCategory()
  listRegRoom()
})

const onShowModel = () => {
  isVisible.value = true
  listCategoryItems();
  listRoomTerminal()
}

const listRegRoom = () => {
  RoomApi.listRegRoom().then(data => {
    listRooms.value = data
    if (data && data.length) {
      room.value = data[0].id
    }
  })
}

const listYjCategory = () => {
  YjCategoryApi.listYjCategory().then(data => {
    categories.value = data.map(item => Object.assign({
      label: item.name,
      value: item.id,
    }))
  })
}

const listCategoryItems = (categoryId: string = null) => {
  YjItemsApi.listYjItem(categoryId, 1, 9999).then(res => {
      table.data = res.data.map(item => Object.assign({
        key: item.id,
        value: item.id,
        label: item.name,
        origin: item
      }))
  })
}

const listRoomTerminal = () => {
  YjRoomItemsApi.listYjRoomItems(1, 9999, room.value).then(res => {
    table.selectList = res.data.map(item => item.itemId)
  })
}

const onRoomChange = () => {
  listRoomTerminal()
}

const onCancelModel = () => {
  isVisible.value = false
  table.selectList = []
  table.data = []
}

const onSave = () => {
  YjRoomItemsApi.updateYjRoomItemRelation(room.value, table.selectList.join(",")).then(res => {
    if (res) {
      ElMessage.success({
        message: '操作成功'
      })
      $emit('saveSuccess')
    }
  })
}
defineExpose({
  onShowModel
})
</script>
<style scoped lang="scss">
  .yy-base-item {
    &_room {
      padding: 10px 25px;
      display: flex;
      align-items: center;
      background: #f1f1f1;
    }
    &_search {
      display: flex;
      padding: 5px 25px;
      justify-content: space-between;
    }
  }
</style>